<script setup lang="ts">
import { defineProps, computed } from 'vue';
import useConfigStore from '@renderer/store/useConfigStore'
import useVideo from '@renderer/composables/useVideo';
import { DataType } from '@renderer/types';
import { CloseOne } from '@icon-park/vue-next';

const { config } = useConfigStore()
interface Prop{
  type: DataType,
  placeholder?: String
}
const props = defineProps<Prop>()
const list = computed(()=>{
  return props.type == 'size' ? config.sizes : config.frames
})
const { add,del,newValue } = useVideo()
</script>

<template>
  <main class="">
      <el-select placeholder="" v-model="config[props.type]">
        <el-option
          v-for="(item, index) in list"
          :key="index"
          :label="item"
          :value="item"
        >
          <div class="flex items-center justify-between">
            {{ item }}
            <div class="del-icon" @click="del(props.type,index)" v-if="index > 1">
              <close-one theme="outline" size="15" />
            </div>
          </div>
        </el-option>
      </el-select>
      <div class="flex gap-1 mt-2 items-center">
        <el-input
          v-model="newValue"
          :placeholder="placeholder"
          clearable
        ></el-input>
        <el-button  type="primary" size="default" @click="add(props.type)">增加</el-button>
      </div>
  </main>
</template>

<style scoped lang="scss">
.del-icon{
  @apply text-slate-300 hover:text-red-500 hover:scale-125 cursor-pointer duration-300
}
</style>
